<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="webupload/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="webupload/webuploader.css">
<link rel="stylesheet" type="text/css" href="webupload/style.css">



</head>
<body>
<img alt="" src="" id="myimg"/>
<input id="myinput"/>

<div class="container">
    <div class="uploader uploader1">
        <div class="message">
            可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴(IE不支持)，或者点击选择图片按钮，来体验此demo。
            <br />
            <br />
            个数为6,可编辑, 默认加载服务端数据.
        </div>
        <div class="wrapper">
            <div class="file-list"></div>
        </div>
        <div class="actions-area">
            <div class="actions">
                <div class="filePicker action">选择图片</div>
                <button class="uploadFile action upload-btn disabled">上传图片</button>
            </div>
        </div>

    </div>

    <div class="uploader uploader2">
        <div class="message">
            可以尝试文件拖拽，或者点击选择图片按钮，来体验此demo。
            <br />
            <br />
            个数为1,单选, 可编辑.
        </div>
        <div class="wrapper">
            <div class="file-list"></div>
        </div>
        <div class="actions-area">
            <div class="actions">
                <div class="filePicker action">选择图片</div>
                <button class="uploadFile action upload-btn disabled">上传图片</button>
            </div>
        </div>
    </div>

    <div class="uploader uploader3">
        <div class="message">
            可以尝试文件拖拽，或者点击选择图片按钮，来体验此demo。
            <br />
            <br />

            无上传按钮,个数无限制, 可以通过调用api方法进行保存 实例变量  w3.upload();
        </div>
        <div class="wrapper">
            <div class="file-list"></div>
        </div>
        <div class="actions-area">
            <div class="actions">
                <div class="filePicker action">选择图片</div>
            </div>
        </div>
    </div>

    <div class="uploader uploader4">
        <div class="message">
            可以尝试文件拖拽，或者点击选择文件按钮，来体验此demo。(不限制类型,不限制个数)
        </div>
        <div class="wrapper">
            <div class="file-list"></div>
        </div>
        <div class="actions-area">
            <div class="actions">
                <div class="filePicker action">选择文件</div>
                <button class="uploadFile action upload-btn disabled">上传文件</button>
            </div>
        </div>
    </div>
</div>
 <script src="webupload/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="webupload/bootstrap/js/bootstrap.min.js"></script>
<script src="webupload/webuploader.js"></script>
<script src="webupload/webuploader.support.js"></script>
<script>
    var w1 = new WebUploaderSupport({
        server: "FileUploadServlet",
        paste: document.body
        ,swf: '/webuploader/Uploader.swf'  // swf文件所处路径
        ,support:  {
            uploader: ".uploader.uploader1",  //上传区域容器选择器
            fileSize: 6,  //文件总个数, -1时无限制
           /*  serverFiles: [
                {"src":"../images/preview/1.jpg","name":"1.jpg","attrs":{"data-server-file":true,"data-delete-url":""}}
            ],
  */      
            uploadSuccess: function (file, data) {
                var $item = this.getItem(file),
                    $state = $item.find('.state');
               		$item.find('.progress').hide();
                if (data.status) {  //上传成功时
                    this.uploadSuccessCallbck($item, data);  //用于标识为服务端文件
                    if (!$state.hasClass('success')) {
                        $state.attr("class", "state success");
                        $state.text('上传成功');
                        $("#myimg").attr("src",data.path);
                        $("#myinput").attr("value",data.path);
                        $item.attr("data-server-file","true");
                        $item.attr("data-delete-url",data.delurl);
                        alert(data.delurl);
                 }
                    $item.removeClass("retry");
                } else {
                    if (!$state.hasClass('error')) {
                        $state.attr("class", "state error");
                        $state.text('上传失败');
                    }
                    $item.addClass("retry");
                }
            },
            
            deleteServerFile: function($item, url, deleteServerFileCallback) {
                var self = this;
                 $.ajax({
                    dataType: "json",
                    type: "post",
                    url: url,
                    success: function (json) {
                        deleteServerFileCallback(self, $item, json);  //通过callback执行业务操作
                        //文件操作完成后重新加载选择按钮样式
                        self.loadChooseFileBtnStyle();
                        $("#myimg").attr("src","");
                        $("#myinput").attr("value","");
                    }
                });
            },
        }
    });

    var w2 = new WebUploaderSupport({
         server: "FileUpload"
        ,swf: 'webupload/Uploader.swf'  // swf文件所处路径
        ,support: {
            fileSize: 1,
            multiple: false,  //单选
            uploader: ".uploader.uploader2",
            errorTypeHanlder: function (type, file) {
                if (type == "Q_TYPE_DENIED") {
                    alert(file.name + "不满足格式要求");
                }
            }
        }
    });

    var w3 = new WebUploaderSupport({
        server: "/webuploader-support/webUploader/save?path=webUploader"
        ,swf: '../webuploader/Uploader.swf'  // swf文件所处路径
        ,support: {
			thumbnailWidth: 180,
            thumbnailHeight: 180,
            uploader: ".uploader.uploader3",
        }
    });

    //不限制文件类型
    var w4 = new WebUploaderSupport({
        server: "/webuploader-support/webUploader/save?path=webUploader"
        ,swf: '../webuploader/Uploader.swf'  // swf文件所处路径
        ,accept: {
            title: 'all',
            extensions: '*',
            mimeTypes: '*'
        }
        ,support: {
            uploader: ".uploader.uploader4",
        }
    });

</script>
</body>
</html>